<template>
  <div class="class-detail-box">
    <nav-top Licon="more" @callback="navCb" Ricon="add">
      <div slot="title" @click="pick">
        {{(currCla.nianji || '') + (currCla.name || '')}}
        <span class="arrow">
          <img
            class="arrow_row"
            :class="{act:picked}"
            src="../../../assets/images/icon/class_upArrow.png"
            alt
          />
        </span>
      </div>
      <div class="add-teacher" slot="add">关联老师</div>
    </nav-top>
    <div class="class-detail">
      <div class="box">
        <div class="tabs flex jce">
          <div
            class="tab"
            :class="{act: currTab === i}"
            @click="tabChange(i)"
            v-for="(tab, i) in tabs"
            :key="i"
          >
            <span class="text dib vat transition">{{tab.text}}</span>
            ({{tab.value}})
          </div>
        </div>
        <load-more class="list" v-if="!currTab" :no-data="noData" @loadMore="more">
          <div class="item lh1" v-for="(item, i) in list[0]" :key="i">
            <div class="stu flex">
              <div class="username flex-1 wsnw">{{item.username}}</div>
              <div class="name flex-1 tac">{{item.realname || '-'}}</div>
              <div class="phone flex-1 wsnw">{{item.phone || '-'}}</div>
            </div>
            <div class="vip flex" v-for="(vip, k) in item.pack_list || []" :key="k">
              <div class="v-name flex-1 wsnw">{{vip.pack_name}}</div>
              <div class="flex-1"></div>
              <div class="price flex-1">￥{{vip.real_pay}}</div>
            </div>
          </div>
          <div v-if="!list[0].length" class="tips">暂无数据</div>
        </load-more>
        <div class="list" v-else>
          <div class="item lh1" v-for="(item, i) in list[1]" :key="i">
            <div class="tea flex">
              <div class="subject flex-1">{{item.is_leader && !i ? '班主任' : item.title || '-'}}</div>
              <div class="name flex-1">{{item.realname || '-'}}</div>
              <div class="username flex-2 tac">{{item.username}}</div>
              <div class="phone flex-2 tac">{{item.phone || '-'}}</div>
            </div>
          </div>
          <div v-if="!list[1].length" class="tips">暂无数据</div>
        </div>
      </div>
      <gl-popup :value="showPopup" @close="showPopup = false">
        <div class="p-box bsb">
          <div class="p-title tac">关联老师</div>
          <div class="content">
            <div class="c-item flex" v-for="(item, i) in teacherOpt" :key="i">
              <div class="dib vat label wsnw">
                <span class="label-inner dib vat taj">{{item.title}}</span>:
              </div>
              <div @click="picker(item)" class="flex-1 picker-show por">
                {{item.value.id?item.value.realname:''}}
                <i class="arrow abs-m"></i>
              </div>
            </div>
          </div>
          <div class="btn tac mlr-auto" @click="submit">提交</div>
        </div>
      </gl-popup>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ClassDetail",
    data() {
      return {
        tabs: [
          { text: "学生", value: 0, prop: "" },
          { text: "老师", value: 0, prop: "" }
        ],
        showPopup: false,
        currTab: 0,
        list: {
          0: [],
          1: []
        },
        curr: [0, 1],
        limits: [10, 999],
        noData: false,
        teacherOpt: [],
        nianjiList: [],
        currCla: {},
        picked: false
      };
    },
    watch: {
      $route(val) {
        // this.list = {
        //   0: [],
        //   1: []
        // }
        // this.list[0].splice(0,this.list[0].length)
        // this.list[1].splice(0,this.list[1].length)
        // this.curr = [0, 1];
        // this.getList(2);
        // this.noData = false;
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.Http.getGradeSubject({
          nianji_id: this.$route.params.nid
        })
          .then(res => {
            res.list.unshift({ title: "班主任" });
            res.list.map(e => {
              e.value = {};
              e.options = [];
            });
            this.teacherOpt = res.list;
            return this.teacherOpt;
          })
          .then(opt => {
            this.Http.getTeacherOptions({
              school_id: this.$route.params.sid,
              limits: 9999
            }).then(res => {
              res.list.map(e => {
                this.teacherOpt[0].options.push(e);
                let xueke = this.teacherOpt.find(s => e.xueke_id === s.id);
                xueke && xueke.options.push(e);
              });
              this.teacherOpt.map(item => {
                if (!item.options.length) {
                  item.options.push({ realname: "暂无老师" });
                } else {
                  item.options.unshift({ realname: "无" });
                }
              });
              this.getList(2);
            });
          })
          .catch(console.log);

        this.getClassList();
      },
      navCb(type) {
        switch (type) {
          case "more":
            this.showUserPopup();
            break;
          case "add":
            this.showPopup = true;
            break;
        }
      },
      getClassList() {
        this.Http.getClassList({ school_id: this.$route.params.sid })
          .then(res => {
            // console.log(res);
            let temp = [];
            res.list.map(e => {
              if (!temp.includes(e.nianji_id)) {
                temp.push(e.nianji_id);
                this.nianjiList.push({
                  id: e.nianji_id,
                  name: e.nianji,
                  classList: [{ name: e.name, id: e.id }]
                });
              } else {
                this.nianjiList.map(j => {
                  if (j.id == e.nianji_id) {
                    j.classList.push({
                      name: e.name,
                      id: e.id
                    });
                  }
                });
              }
              e.id === 1 * this.$route.params.id && (this.currCla = e);
            });
            this.nianjiList.map(item => {
              item.classList.sort((a, b) => (a.name < b.name ? -1 : 1));
            });
            this.nianjiList = this.nianjiList.sort((a, b) => a.id - b.id);
            this.nianjiList.splice(
              0,
              this.nianjiList.length,
              [...this.nianjiList],
              this.nianjiList[0].classList
            );
          })
          .catch(this.$err);
      },
      pick() {
        this.picked = true;
        let that = this;
        let nianji = this.nianjiList[0].find(
          e => e.id === 1 * this.$route.params.nid
        );
        let temp = [
          // nid, id
          nianji,
          nianji.classList.find(e => e.id === 1 * this.$route.params.id)
        ];

        this.showPicker({
          options: this.nianjiList,
          title: "请选择班级",
          value: temp,
          sure(res, fn) {
            that.$router.replace({
              name: "ClassDetail",
              params: {
                ...that.$route.params,
                id: res[1].id,
                nid: res[0].id
              }
            });
            fn();
          },
          change(res, i, pic) {
            if (!i) {
              pic.setSlotValues(1, res[0].classList);
              pic.setSlotValue(1, res[0].classList[0]);
            }
          },
          close() {
            that.picked = false;
          }
        });
      },
      more(fn) {
        this.curr[0]++;
        this.getList(1, fn);
      },
      getList(type, cb) {
        let ind = type - 1;
        this.Http.getQueryList({
          class_id: this.$route.params.id,
          type,
          curr: this.curr[ind],
          limits: this.limits[ind]
        })
          .then(res => {
            // console.log(res);
            this.tabs[ind].value = res.total;
            this.curr[ind] === 1 && (this.list[ind] = []);
            this.list[ind].push(...res.list);
            !ind && (this.noData = res.total <= this.list[0].length);
            if (type === 2) {
              let arr = this.list[1];
              arr.map((e, i) => {
                let sub = this.teacherOpt.find(s => e.title === s.title);

                if (e.is_leader) {
                  this.teacherOpt[0].value =
                    this.teacherOpt[0].options.find(opt => opt.id === e.id) || {};
                  if (e.is_in) {
                    arr.push({ ...e, is_leader: false });
                    sub &&
                      (sub.value =
                        sub.options.find(opt => opt.id === e.id) || {});
                  }
                } else {
                  sub &&
                    (sub.value = sub.options.find(opt => opt.id === e.id) || {});
                }
              });

              arr.sort((p, n) => (p.is_leader ? -1 : p.title > n.title ? -1 : 1));
            }
            cb && cb();
          })
          .catch(this.$err);
      },
      tabChange(val) {
        this.currTab = val;
      },
      submit(e) {
        //
        let teachers = [];
        this.teacherOpt.map((e, i) => {
          if (e.value && e.value.id && i) {
            teachers.push(e.value.id);
          } else if (!i) {
            this.Http.setLeader({
              class_id: this.$route.params.id,
              leader: e.value.id
            }).catch(err => this.$toast("设置班主任失败！"));
          }
        });
        this.Http.addClassTeacher({
          class_id: this.$route.params.id,
          teacher_ids: teachers
        })
          .then(res => {
            this.$toast("关联任课老师成功");
            this.getList(2);
            this.showPopup = false;
          })
          .catch(this.$err);
      },
      picker(item) {
        this.showPicker({
          options: item.options,
          title: item.title,
          valueKey: "realname",
          value: item.options.filter(e => e === item.value),
          sure(res, fn) {
            item.value = res.pop();
            fn();
          }
        });
      }
    }
  };
</script>

<style scoped lang="less">
  .class-detail-box {
    min-height: 100vh;
    background: rgba(247, 248, 250, 1);
  }

  .arrow {
    display: inline-block;
    width: 24px;
    height: 15px;
    .arrow_row {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      transform: rotate(180deg);
      transition: 0.2s;
      &.act {
        transform: rotate(360deg);
      }
    }
  }

  .class-detail {
    padding: 0 30px;
    .box {
      background: #fff;
      box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
      border-radius: 20px;
    }
  }

  .add-teacher {
    color: #14c8ff;
    font-size: 30px;
  }

  .tabs {
    padding-top: 27px;
    border-bottom: 1px solid #e8e8e8;
    color: #999999;
    font-size: 30px;
    line-height: 44px;
    .text {
      padding: 0 10px;
      background: linear-gradient(-90deg, rgba(103, 219, 255), rgba(54, 172, 255))
        no-repeat bottom left / 100% 0;
    }
    .act > {
      .text {
        color: #222;
        font-weight: bold;
        background-size: 100% 16px;
      }
    }
  }

  .list {
    margin-top: 6px;
    &.my-load-more {
      max-height: calc(100vh - 200px);
    }
  }

  .item {
    padding: 30px 26px;
    &:not(:last-child) {
      border-bottom: 1px #e8e8e8 solid;
    }
    .vip {
      margin-top: 24px;
      color: #999;
      font-size: 26px;
    }
  }

  .stu {
    font-weight: bold;
    font-size: 30px;
    color: #222;
  }

  .tea {
    font-size: 30px;
    color: #222;
    > :first-child {
      font-weight: bold;
    }
  }

  .p-box {
    padding: 0 34px 40px;
    width: 678px;
    color: #777;
    font-size: 34px;
    .p-title {
      font-size: 37px;
      color: #000;
      line-height: 114px;
    }
    .content {
      margin-bottom: 40px;
    }
    .c-item {
      align-items: center;
      &:not(:first-child) {
        margin-top: 34px;
      }
    }
    .label {
      width: 130px;
      .label-inner {
        min-width: 100px;
      }
    }
    .picker-show {
      padding-left: 24px;
      height: 50px;
      border: 1px solid #ececec;
      .arrow {
        right: 18px;
        width: 18px;
        height: 12px;
        background: url(../../../assets/images/icon/class_upArrow.png) no-repeat
          left top / 100% 100%;
      }
    }
  }

  .btn {
    width: 290px;
    height: 90px;
    line-height: 90px;
    background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
    box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
    border-radius: 20px;
    color: #fff;
    font-size: 32px;
  }

  .tips {
    font-size: 32px;
    text-align: center;
    padding: 40px;
  }
</style>